<template>
	<main-container>
		<!-- 搜索 -->
		<el-form :model="state.queryParams" ref="queryRef" :inline="true" v-show="showSearch">
			<el-form-item label="优惠券名称" prop="couponName">
				<el-input v-model="state.queryParams.couponName" clearable></el-input>
			</el-form-item>
			<el-form-item label="状态" prop="status">
				<el-select v-model="state.queryParams.status" clearable>
					<el-option v-for="item in status" :key="item.value" :label="item.label" :value="item.value" />
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="initPage"
					><el-icon> <ele-Search /> </el-icon>搜索</el-button
				>
				<el-button @click="resetQuery(queryRef)"
					><el-icon> <ele-Refresh /> </el-icon>重置</el-button
				>
			</el-form-item>
		</el-form>
		<!-- 工具栏 -->
		<div class="hx-table-toolbar">
			<div>
				<el-button type="primary" @click="add" v-auth="'promotion:couponinfo:add'"
					><el-icon> <ele-Plus /> </el-icon>新增</el-button
				>
			</div>
			<right-toolbar :searchBtn="true" :refreshBtn="true" @search="showSearch = !showSearch" @refresh="initPage"></right-toolbar>
		</div>
		<!-- 列表 -->
		<el-table v-loading="loading" :data="state.tableData" border>
			<el-table-column prop="couponName" label="优惠券名称" align="center" show-overflow-tooltip></el-table-column>
			<el-table-column prop="picUrl" label="有效时间" align="center" show-overflow-tooltip>
				<template #default="scope">
					{{ scope.row.receiveStartedAt }}-
					{{ scope.row.receiveEndedAt }}
				</template>
			</el-table-column>

			<el-table-column prop="couponType" label="优惠形式" align="center">
				<template #default="scope">
					<span v-if="scope.row.couponType == '1'" type="danger"> 指定金额:{{ scope.row.amount }}元 </span>
					<span v-if="scope.row.couponType == '2'" type="success">{{ scope.row.discount }}折</span>
				</template>
			</el-table-column>
			<el-table-column prop="useRange" label="可用范围" align="center">
				<template #default="scope">
					<el-tag v-if="scope.row.useRange == '1'" type="success">全部商品</el-tag>
					<el-tag v-if="scope.row.useRange == '2'" type="danger">指定商品</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="totalNum" label="发行数量" align="center"></el-table-column>
			<el-table-column prop="assignCount" label="已发放数量" align="center"></el-table-column>
			<el-table-column prop="usedCount" label="已使用数量" align="center"></el-table-column>
			<el-table-column prop="remainNum" label="剩余数量" align="center"></el-table-column>
			<el-table-column prop="status" label="状态" align="center">
				<template #default="scope">
					<dict-tag :options="status" :value="scope.row.status"></dict-tag>
				</template>
			</el-table-column>
			<el-table-column prop="createTime" label="创建时间" width="180" />
			<el-table-column label="操作" width="200" align="center" fixed="right">
				<template #default="scope">
					<el-button link type="primary" @click="edit(scope.row)" v-auth="'promotion:couponinfo:edit'"
						><el-icon> <ele-Edit /> </el-icon>修改</el-button
					>
					<el-button link type="danger" @click="del(scope.row.id)" v-auth="'promotion:couponinfo:del'"
						><el-icon> <ele-Delete /> </el-icon>删除</el-button
					>
				</template>
			</el-table-column>
		</el-table>
		<!-- 分页 -->
		<pagination
			v-model:total="state.page.total"
			v-model:currentPage="state.page.currentPage"
			v-model:pageSize="state.page.pageSize"
			@changePage="initPage"
		></pagination>
	</main-container>
</template>
<script lang="ts" setup>
import { ref, reactive } from 'vue';
import { getPage, delObj } from '/@/api/promotion/couponinfo';
import { useRouter } from 'vue-router';
import { ElMessageBox, ElMessage } from 'element-plus';
import type { FormInstance } from 'element-plus';
import { useDict } from '/@/utils/dict';
const queryRef = ref<FormInstance>();
// 字典
const { status } = useDict('status');
const state = reactive({
	queryParams: {
		couponName: '',
		status: '',
	},
	page: {
		total: 0,
		currentPage: 1,
		pageSize: 10,
		descs: 'create_time',
	},
	tableData: [],
});
const showSearch = ref(true);
const loading = ref(false);
const $route = useRouter();

const initPage = async () => {
	loading.value = true;
	let params = {
		current: state.page.currentPage,
		size: state.page.pageSize,
		descs: state.page.descs,
	};
	await getPage(Object.assign(params, state.queryParams))
		.then((response) => {
			state.tableData = response.data.data.records;
			state.page.total = response.data.data.total;
			loading.value = false;
		})
		.catch(() => {
			loading.value = false;
		});
};
/**
 * 重置搜索表单
 */
const resetQuery = (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	formEl.resetFields();
};
/**
 * 新增按钮
 */
const add = () => {
	$route.push({ path: '/promotion/coupon/info/form' });
};
/**
 * 修改按钮
 */
const edit = (row: any) => {
	$route.push({ path: '/promotion/coupon/info/form', query: { id: row.id } });
};
/**
 * 删除按钮
 */
const del = (id: string) => {
	ElMessageBox.confirm('此操作将删除该优惠券，是否继续?', '提示', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning',
	}).then(() => {
		delObj(id)
			.then((response) => {
				ElMessage.success('删除成功');
				initPage();
			})
			.catch(() => {});
	});
};
initPage();
</script>
